
import { createTheme, styled } from '@mui/material/styles';
import DashboardIcon from '@mui/icons-material/Dashboard';
import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
import LayersIcon from '@mui/icons-material/Layers';
import { type Navigation } from '@toolpad/core/AppProvider';
import { ReactRouterAppProvider } from '@toolpad/core/react-router';
import { Outlet } from 'react-router';
import './App.css'


const NAVIGATION: Navigation = [
  {
    kind: 'header',
    title: 'Main items',
  },
  {
    segment: 'dashboard',
    title: 'Dashboard',
    icon: <DashboardIcon />,
  },
  {
    segment: 'allSamples',
    title: 'AllSamples',
    icon: <ShoppingCartIcon />,
    children: [
      {
        segment: 'abuffermultipass?memoryStrategy=multipass',
        title: 'Abuffer Multipass',
        icon: <img src="https://www.w3.org/2023/02/webgpu-logos/webgpu-horizontal.svg" alt="Abuffer Multipass" style={{ width: 24, height: 24 }} />,
      },
      {
        segment: 'abufferclampPixelRatio?memoryStrategy=clamp-pixel-ratio',
        title: 'Abuffer Clamp Pixel Ratio',
        icon: <img src="https://www.w3.org/2023/02/webgpu-logos/webgpu-horizontal.svg" alt="Abuffer Clamp Pixel Ratio" style={{ width: 24, height: 24 }} />,
      },
      {
        segment: 'onecubes',
        title: 'One Cubes',
        icon: <img src="https://www.w3.org/2023/02/webgpu-logos/webgpu-horizontal.svg" alt="One Cubes" style={{ width: 24, height: 24 }} />,
      },
      {
        segment: 'twocubes',
        title: 'Two Cubes',
        icon: <img src="https://www.w3.org/2023/02/webgpu-logos/webgpu-horizontal.svg" alt="Two Cubes" style={{ width: 24, height: 24 }} />,
      },
      {
        segment: 'texturedCube',
        title: 'TexturedCube',
        icon: <img src="https://www.w3.org/2023/02/webgpu-logos/webgpu-horizontal.svg" alt="TexturedCube" style={{ width: 24, height: 24 }} />,
      },
      {
        segment: 'instanceCube',
        title: 'InstanceCube',
        icon: <img src="https://www.w3.org/2023/02/webgpu-logos/webgpu-horizontal.svg" alt="InstanceCube" style={{ width: 24, height: 24 }} />,
      },
      {
        segment: 'fractalCube',
        title: 'FractalCube',
        icon: <img src="https://www.w3.org/2023/02/webgpu-logos/webgpu-horizontal.svg" alt="FractalCube" style={{ width: 24, height: 24 }} />,
      },
      {
        segment: 'cubeMap',
        title: 'CubeMap',
        icon: <img src="https://www.w3.org/2023/02/webgpu-logos/webgpu-horizontal.svg" alt="CubeMap" style={{ width: 24, height: 24 }} />,
      },
      {
        segment: 'triangle',
        title: 'Triangle',
        icon: <img src="https://www.w3.org/2023/02/webgpu-logos/webgpu-horizontal.svg" alt="Triangle" style={{ width: 24, height: 24 }} />,
      },
      {
        segment: 'triangleMSAA',
        title: 'TriangleMSAA',
        icon: <img src="https://www.w3.org/2023/02/webgpu-logos/webgpu-horizontal.svg" alt="TriangleMSAA" style={{ width: 24, height: 24 }} />,
      },
      {
        segment: 'cameras',
        title: 'Cameras',
        icon: <img src="https://www.w3.org/2023/02/webgpu-logos/webgpu-horizontal.svg" alt="Cameras" style={{ width: 24, height: 24 }} />,
      },
      {
        segment: 'blending',
        title: 'Blending',
        icon: <img src="https://www.w3.org/2023/02/webgpu-logos/webgpu-horizontal.svg" alt="Blending" style={{ width: 24, height: 24 }} />,
      },
      {
        segment: 'multipleCanvas',
        title: 'MultipleCanvas',
        icon: <img src="https://www.w3.org/2023/02/webgpu-logos/webgpu-horizontal.svg" alt="MultipleCanvas" style={{ width: 24, height: 24 }} />,
      },
      {
        segment: 'generateMipmap',
        title: 'Generate Mipmap',
        icon: <img src="https://www.w3.org/2023/02/webgpu-logos/webgpu-horizontal.svg" alt="Generate Mipmap" style={{ width: 24, height: 24 }} />,
      },
      {
        segment: 'imgBlur',
        title: 'ImageBlur',
        icon: <img src="https://www.w3.org/2023/02/webgpu-logos/webgpu-horizontal.svg" alt="ImageBlur" style={{ width: 24, height: 24 }} />,
      },
      {
        segment: 'renderBundles',
        title: 'RenderBundles',
        icon: <img src="https://www.w3.org/2023/02/webgpu-logos/webgpu-horizontal.svg" alt="RenderBundles" style={{ width: 24, height: 24 }} />,
      },
      {
        segment: 'gameofLife',
        title: 'GameOfLife',
        icon: <img src="https://www.w3.org/2023/02/webgpu-logos/webgpu-horizontal.svg" alt="GameOfLife" style={{ width: 24, height: 24 }} />,
      },
      {
        segment: 'normalMap',
        title: 'NormalMap',
        icon: <img src="https://www.w3.org/2023/02/webgpu-logos/webgpu-horizontal.svg" alt="NormalMap" style={{ width: 24, height: 24 }} />,
      },
      {
        segment: 'points',
        title: 'Points',
        icon: <img src="https://www.w3.org/2023/02/webgpu-logos/webgpu-horizontal.svg" alt="Points" style={{ width: 24, height: 24 }} />,
      },
      {
        segment: 'particles',
        title: 'Particles',
        icon: <img src="https://www.w3.org/2023/02/webgpu-logos/webgpu-horizontal.svg" alt="Particles" style={{ width: 24, height: 24 }} />,
      },
      {
        segment: 'computeboids',
        title: 'ComputeBoids',
        icon: <img src="https://www.w3.org/2023/02/webgpu-logos/webgpu-horizontal.svg" alt="Particles" style={{ width: 24, height: 24 }} />,
      },
    ],
  },
  {
    kind: 'divider',
  },
  {
    kind: 'header',
    title: 'Analytics',
  },
  {
    segment: 'integrations',
    title: 'Integrations',
    icon: <LayersIcon />,
  },
];

const BRANDING = {
  title: 'WebGPU Samples',
  logo: <img src="https://www.w3.org/2023/02/webgpu-logos/webgpu-horizontal.svg" alt="WebGPU Samples" style={{ width: 120}} />,
}
const demoTheme = createTheme({
  colorSchemes: { light: true, dark: true },
  cssVariables: {
    colorSchemeSelector: 'class',
  },
  breakpoints: {
    values: {
      xs: 0,
      sm: 600,
      md: 600,
      lg: 1200,
      xl: 1536,
    },
  },
});

const Skeleton = styled('div')<{ height: number }>(({ theme, height }) => ({
  backgroundColor: theme.palette.action.hover,
  borderRadius: theme.shape.borderRadius,
  height,
  content: '" "',
}));

function App() {
 return (
    <ReactRouterAppProvider
      navigation={NAVIGATION}
      theme={demoTheme}
      window={window}
      branding={BRANDING}
    >
      <Outlet/>
    </ReactRouterAppProvider>
  );
}
export default App
